<template>
  <div>
    <h1>{{$store.state.age}}</h1>
    <p>使用场景：页面大量重复，结构相似，数据不同</p>
    <p>歌曲名称：{{$route.params.id}}</p>
    <h1>ID:{{id}}</h1>
    <p>宝，该睡觉了~~</p>
    <el-button @click="num ++" type="danger">加入购物车</el-button>
    <span>购物车数量：{{num}}</span>
    <hr>
    <router-link class="red" to="/detail/8848">成功认识的标配——8848，小牛皮后盖</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      num: 0
    }
  },
  created() {
    this.id = this.$route.params.id;
    console.log('我正在获取'+this.$route.params.id+'的信息，然后渲染');
  },
  // 从/detail/xxx到/detail/yyy,原来的组件实例会被复用,是因为这两个地址对应同一个组件
  // 副作用是 钩子函数不再次执行，对应的代码也不再执次行，通过beforeRouteUpdate解决问题
  beforeRouteUpdate(to, from, next) {
    this.id = to.params.id;
    console.log('我正在获取'+to.params.id+'的信息，然后渲染');
    next();
  }
}
</script>

<style>
  .red {
    font-size: 80px;
    color: red;
  }
  p {
    line-height: 10;
  }
</style>